<!-- eslint-disable -->
<template>
  <div class="page">
    <div class= "header">
      <van-nav-bar class= "page-nav-bar" title="登录">
        <van-icon slot='left' size="18px" name="arrow-left" @click="$router.back()" />
      </van-nav-bar>
    </div>
    <div class="contc">
      <van-form @submit="onSubmit" ref="loginForm">
        <van-field
          v-model="user.mobile"
          name="mobile"
          placeholder="请输入手机号"
          :rules="userFormRulers.phone"
          type='number'
          max-length="11"
        >
          <i slot="left-icon" class="iconfont icon-shouji toutiaoico"></i>
        </van-field>

        <van-field
          v-model="user.code"
          name="code"
          placeholder="请输入验证码"
          :rules="userFormRulers.code"
          type='number'
          max-length="6"
          >
          <i slot="left-icon" class="iconfont icon-yanzhengma toutiaoico"></i>
          <template #button>
            <van-count-down v-if="iscountshow" :time="6000*10" format='ss秒' @finish="iscountshow=false" />
            <van-button v-else size="small" class="sendbtn" native-type="button" round type="primary" @click="onSendSms">发送验证码</van-button>
          </template>
        </van-field>
        <div class="loginbtnwarp">
          <van-button  block type="info" class="loginbtn" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { login,sendsms } from '@/api/user.js'
export default {
  name: 'LoginIndex',
  components: {},
  data () {
    return {
      user: {
        mobile: '',
        code: '',
      },
      iscountshow:false,
      userFormRulers:{
        phone:[{
          required: true, 
          message: '请填写手机号'
          },{
            pattern: /1[3|5|7|8|9]\d{9}/,
            message:'手机号格式不正确'
          }
        ],
        code:[{
            required: true, message: '请填写验证码'
          },{
            pattern: /\d{6}/,message:'验证码格式不正确'
        }]
      },
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {console.log(this.$store.state.logintoken)},
  methods: {
    async onSubmit () {
      // 获取数据
      // console.log(this.user, this.code)
      const user = this.user
      this.$toast.loading ({
        messaage:'登录中...',
        forbidClick:true,//禁用背景点击
        duration:0
      })
      try {
          const res = await login(user)
          this.$toast.success('登录成功')
          this.$store.commit('addtoken',res.data.data)
          this.$router.replace({path:'/home'})//登录成功跳转首页
      } catch (err) {
          console.log('登录失败', err)
          this.$toast.fail('登录失败')
      }
      // 表单验证
      // 提交请求
      // 响应结果
    },
    async onSendSms(){
      try{
        await this.$refs.loginForm.validate('mobile')
        console.log('验证通过')
      }catch(err){
        console.log("验证失败")
        return
      }
      this.iscountshow=true
      try{
        const res = await sendsms(this.user.mobile)
        this.$toast('发送成功')
        console.log('发送成功',res)
      }catch(err){
        if(err.status=429){
          this.$toast('发送太频繁，请稍后再试')
        }else{
          this.$toast('发送失败')
        }
       this.iscountshow=false
      }
    }
  }
}
</script>

<style type="less" scope>
.toutiaoico{
  font-size:37px;
}
.sendbtn{
  width: 152px;
  height: 46px;
  background: #ededed;
  font-size: 22px;
  color: #666;border:none;
}
.loginbtnwarp{
  padding:53px 33px;
}
.loginbtn{
  background:#6db4fb;
  border:none;
}

</style>
